Skip to main content

Quick Start - React

How to use dxchart5-react with React based apps​

For react based apps we have a react component ChartReactApp and to start you simply need to render it like any other react component.

Attach ChartReactApp component to your application​

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
function App() {
    return (
        <div className="App" style={{ height: 576, width: 800 }}>
            <ChartReactApp dependencies={{ ...CREATE_MOCK_PROVIDERS() }} />
        </div>
    );
}
const rootEl = document.getElementById('root');
if (rootEl) {
    const root = createRoot(rootEl);
    root.render(<App />);
}

Container element of the ChartReactApp component should have the height and width in absolute units such as px, or vh, because that's how CSS works. So to make it display right, just give it a height 576px and width 800px for example.

Then you should see the following.

That's the bare minimum usage with mock data.

Enjoy!​

Further reading​